<template>
  <div class="cinemafims">
     <div class="swiper-container" >
        <div class="bgblur" :style="{background:`url('${obj.poster}')`}"></div>
         <div class="filmslist swiper-wrapper">
            <div class="swiper-slide" v-for="(list,index) in init" :key="index">
               <img :src="list.poster" @click="go(list.filmId)">
            </div>
         </div>
     </div>
     <div class="info">
        <p>{{obj.name}} <i>{{obj.grade}}分</i></p>
        <div>
            <span>{{obj.category}}&nbsp;</span>
            <span v-for="(objson,index) in obj.actors" :key="index"> | {{objson.name}}</span>
        </div>
     </div>
     <div class="tickitinfo">
        <div class="dayinfo"> 
           <span v-for="(date,index) in obj.showDate" :key="index" @click="change(obj.filmId,cinema.cinemaId,date)">{{date | day}}</span>
        </div>
        <div v-for="(date) in schedule" :key="date.scheduleId" class="timeinfo">
           <div>
              <span>{{date.showAt | time}}</span>
              <span>{{date.endAt | time}}散场</span>
            </div>
            <div>
               <span>{{date.filmLanguage}}</span>
               <span>{{date.hallName}}</span>
            </div>
            <div>
               <span style="color:red;">{{(date.salePrice)/100}}￥</span>
            </div>
            <div @click="payfor(date.scheduleId)">购票</div>
        </div>
     </div>
     <router-view />
  </div>
</template>

<script>
import Swiper from 'swiper';
import "swiper/css/swiper.css";
import { getSchedule } from '../../api';
export default {
      props:['init','cinema'],
      data(){
         return {
            obj:{},
            date:'',
            schedule:[],
            sid:''
            
         }
      },
      mounted(){
         var _this = this;
         var swiper = new Swiper('.swiper-container', {
         slidesPerView: 3,
         spaceBetween: 30,
	      centeredSlides: true,
         loop: true,
         observer:true,
         observeParents:true,
         on:{
            transitionEnd(){
               // alert(swiper.activeIndex)
               _this.obj = _this.init[this.activeIndex]
               // console.log(_this.obj)
               var time = _this.obj.showDate[0]
               getSchedule(_this.obj.filmId,_this.cinema.cinemaId,time).then((res)=>{
                  console.log(res)
                  _this.schedule=res.data.data.schedules
               })
            },
         }
         })
         
      },
      methods:{
         go(id){
            this.$router.push('/detail/'+id)
         },
         change(fid,cid,date){
           getSchedule(fid,cid,date).then((res)=>{
              console.log(res)
              this.schedule = res.data.data.schedules
              
           })
         },
         payfor(sid){
            this.$router.push({path:'/select/',query:{sid}})
         }
      },
      filters:{
         time(nS){
            return new Date(parseInt(nS) * 1000).toLocaleTimeString().replace(/:\d{1,2}$/,' '); 
         },
         day(nS){
            return new Date(parseInt(nS) * 1000).toLocaleDateString().replace(/:\d{1,2}$/,' '); 

         }
      }
}
</script>

<style scoped>
.cinemafims{
   flex:1;
   overflow: auto;
}
.cinemafims .filmslist{
   height:1.5rem;
   display: flex;
   position: absolute;
   top:0;
}
.cinemafims .filmslist div{
   width:1.8rem;
   height:2.6rem;
}
.cinemafims .filmslist div img{
   width:100%;
   height:100%;
}
 .swiper-container {
      width: 100%;
      height:2.9rem;
    }
    .bgblur{
         width: 100%;
         height:3rem;
         filter: blur(20px)
    }
 .swiper-slide {
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
   .cinemafims .info p{
      font-size:0.4rem;
      margin:0;
   }
    .cinemafims .info p i{
       color:chocolate;
       font-size:0.3rem;
    }
    .cinemafims .info span{
       
       color: gray;
    }
    .cinemafims .info div{
         width:90%;
         margin:0 auto;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
    }
    .cinemafims .tickitinfo .dayinfo{
       height:1rem;
       /* border:1px solid; */
       display: flex;
       justify-content:space-around;
       align-items: center;
       font-size:0.3rem;
    }
    .cinemafims .tickitinfo .timeinfo{
       height:1rem;
       border-bottom:0.01rem solid lightgray;
       display: flex;
       align-items: center;
       justify-content: space-between;
    }
     .cinemafims .tickitinfo .timeinfo div{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
     }
     .cinemafims .tickitinfo .timeinfo div:nth-child(2){
        width:2rem;
     }
     .cinemafims .tickitinfo .timeinfo div span:nth-child(1){
        font-size:0.29rem;
     }
     .cinemafims .tickitinfo .timeinfo div span:nth-child(2){
        color:gray;
        font-size:0.15rem;
     }
</style>